import { Meta } from '@storybook/blocks';

import * as TabBarStories from '../stories/TabBar.stories';

<Meta of={TabBarStories} />

# TabBar

A material design widget that displays a horizontal row of tabs.

## Example

```dart liveslice=TabBar mockup=iPhone7
List<String> _tabs = ['One', 'Two', 'Three'];

@override
Widget build(BuildContext context) {
  return DefaultTabController(
    length: _tabs.length, // This is the number of tabs.
    child: Scaffold(
      appBar: AppBar(
        title: const Text('TabBar Sample'),
        bottom: TabBar(
          // These are the widgets to put in each tab in the tab bar.
          tabs: _tabs.map((String name) => Tab(text: name)).toList(),
        ),
      ),
      body: TabBarView(
        // These are the contents of the tab views, below the tabs.
        children: _tabs.map((String name) {
          return SafeArea(
            top: false,
            bottom: false,
            child: Builder(
              // This Builder is needed to provide a BuildContext that is "inside"
              // the NestedScrollView, so that sliverOverlapAbsorberHandleFor() can
              // find the NestedScrollView.
              builder: (BuildContext context) {
                return Center(
                  child: Text('Page $name'),
                );
              },
            ),
          );
        }).toList(),
      ),
    ),
  );
}
```

## Related Links

- https://api.flutter.dev/flutter/material/TabBar-class.html
